<template>
    <div class="result-container">
        <!-- 试卷名称 -->
        <div class="exam-title">
            {{ paperName }}
        </div>

        <!-- 核心数据展示 -->
        <div class="result-card">
            <!-- 得分展示 -->
            <div class="score-display">
                <span class="score-number">{{ totalScore }}</span>
                <span class="score-label">分</span>
            </div>

            <!-- 状态标识 -->
            <div :class="['status-tag', isPass ? 'pass' : 'fail']">
                {{ isPass ? '考试通过' : '未通过' }}
            </div>

            <!-- 数据详情 -->
            <div class="detail-list">
                <div class="detail-item">
                    <span class="label">正确题数：</span>
                    <span class="value">{{ correctCount }}/{{ totalQuestions }}</span>
                </div>
                <div class="detail-item">
                    <span class="label">当前排名：</span>
                    <span class="value">第{{ ranking }}名</span>
                </div>
                <div class="detail-item">
                    <span class="label">考试时间：</span>
                    <span class="value">{{ examTime }}</span>
                </div>
            </div>
        </div>
        <!-- 操作按钮 -->
        <div class="action-buttons">
            <button v-if="isPass" class="btn primary" @click="handleReview">正确答案</button>
            <button class="btn secondary" @click="handleBack">返回首页</button>
        </div>
    </div>
</template>

<script>
import request from "~/utils/request.js";
export default {
    data() {
        return {
            paperName: '',
            totalScore: '',
            isPass: '',
            ranking: '',
            totalQuestions: '',
            correctCount: '',
            examTime: '',
        };
    },
    activated() {
        this.load();
    },
    methods: {
        async load() {
            const res = await request.get('/exam-log/stuFindExamScore', {
                params: {
                    courseId: this.$route.query.courseId,
                    userId: this.$store.state.user.id,
                }
            });
            if (res.code === "200") {
                const { courseName, exampaperGetScore, isPass, answerTime, rank,correctQuantityNum,exampaperNum } = res.data;
                this.paperName = courseName;
                this.totalScore = exampaperGetScore;
                this.isPass = isPass;
                this.examTime = answerTime;
                this.ranking = rank;
                this.correctCount = correctQuantityNum;
                this.totalQuestions = exampaperNum
            }
        },
        handleReview() {
            // 这里假设使用 Vue Router，需要根据实际情况修改
            this.$router.push({path: "/exam/trueResult", query: {courseId: this.$route.query.courseId}})
        },
        handleBack() {
            // 这里假设使用 Vue Router，需要根据实际情况修改
            this.$router.push('/exam');
        }
    },
};
</script>

<style scoped>
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    padding: 0;
}

.result-container {
    padding: 20px;
    background: #f9f9f9;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.exam-title {
    font-size: 24px;
    color: #333;
    font-weight: 600;
    margin-bottom: 20px;
}

.result-card {
    background: #fff;
    border-radius: 10px;
    padding: 30px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 400px;
    text-align: center;
}

.score-display {
    margin-bottom: 20px;

    .score-number {
        font-size: 64px;
        color: #007bff;
        font-weight: bold;
    }

    .score-label {
        font-size: 24px;
        color: #666;
        margin-left: 8px;
    }
}

.status-tag {
    font-size: 18px;
    padding: 8px 20px;
    border-radius: 20px;
    display: inline-block;
    margin-bottom: 20px;

    &.pass {
        background: #e7f5ff;
        color: #007bff;
    }

    &.fail {
        background: #ffebeb;
        color: #dc3545;
    }
}

.detail-list {
    border-top: 1px solid #eee;
    padding-top: 20px;

    .detail-item {
        display: flex;
        justify-content: space-between;
        margin-bottom: 15px;
        font-size: 16px;

        .label {
            color: #999;
        }

        .value {
            color: #333;
            font-weight: 500;
        }
    }
}

.action-buttons {
    margin-top: 30px;
    display: flex;
    gap: 20px;
    width: 100%;
    max-width: 400px;

    .btn {
        flex: 1;
        height: 45px;
        line-height: 45px;
        border-radius: 25px;
        font-size: 16px;
        border: none;
        cursor: pointer;

        &.primary {
            background: #007bff;
            color: white;
        }

        &.secondary {
            background: #fff;
            color: #007bff;
            border: 1px solid #007bff;
        }
    }
}
</style>
